<template>
	<header>
		<div class='returns' @click='goBack'><i class='iconfont icon-fanhui'></i></div>
		<div class='search-main'>
			<i class='iconfont icon-fangdajing'></i>
			<form action="" onsubmit='return false' @keyup.enter='goSearchList'>
				<input type="search" placeholder="搜索您喜欢的产品..." v-model='searchVal' @click='goSearch' autofocus ref='searchInput'>
			</form>
		</div>
		<div class='search-text' @click='goSearchList'><span>搜索</span></div>
	</header>
</template>

<script>
export default{
	data () {
		return {
			searchVal:this.$route.query.key || ''
		}
	},
	methods:{
		//进入搜索
		goSearchList(){
			//没有搜索关键词，直接返回
			if( !this.searchVal ) return;
			
			//判断用户有没有搜索过
			if( localStorage.getItem('search')  ){
				//有
				var storageVal = JSON.parse(localStorage.getItem('search'));
			}else{
				//没有==>创建
				localStorage.setItem('search','[]'); 
			}
			//变量存值
			storageVal.unshift(  this.searchVal  );

			let val = new Set(storageVal);

			//本地存储存值
			localStorage.setItem('search',JSON.stringify(Array.from(val))); 
			
			//进入搜索详情页
			this.$router.push({
				name:'list',
				query:{
					key:this.searchVal
				}
			})
			//关闭软键盘
			this.$refs.searchInput.blur(); 
		},
		goSearch(){
			if( this.$route.path=='/search' ) return;
			this.$router.push({
				path:'/search'
			});
		},
		goBack(){
			
			if( this.$route.path=='/search' ){
				this.$router.push('/home');
			}else{
				this.$router.push({
					path:'/search'
				});
			}
		}
	}
}
</script>

<style scoped lang='scss'>
header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 1.173333rem;
	background-color: #b0352f;
	.returns{	
		i{
			font-size:0.64rem;
			font-weight: 600;
			color:#fff;
		}
	}
	.search-main{
		display: flex;
		align-items: center;
		width: 7.653333rem;
		height: 0.8rem;
		background-color: #fff;
		border-radius: 12px;
		i{
			padding:0 0.16rem;
			color:#999;
		}
		form{
			flex:1;
			input{
				width: 100%;
				font-size:0.373333rem;
				line-height: 0.8rem;;
			}
		}
	}
	.search-text{
		padding:0 0.16rem;
		color:#fff;
		font-size:0.426666rem;
	}
}
</style>
